<template>
  <table class="tb">
    <tbody>
      <tr>
      <td class="td-name">数据</td>
    </tr>

    <tr>
      <td colspan="2">
        <div v-if="isEditMode">
          <EditPosition
            :edit-position="element.getElement().position"
            @save="savePosition"
            @cancel="cancelEdit"
          ></EditPosition>
        </div>
        <div v-else @click="editPoint">
          {{ element.getElement().position }}
        </div>
      </td>
    </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts" name="EditMarker">
import { ref, computed } from 'vue';
import { useEditElementStore } from '@/stores/map/mapInEditor'; // 假设 Pinia store 路径
import EditPosition from "@/views/map/dialog/MapEditElement/EditOption/EditPosition.vue";

// 获取 Pinia store 实例
const editElementStore = useEditElementStore();

// 从 store 中获取状态
const element = computed(() => editElementStore.element);
const path = computed(() => editElementStore.path);

// 定义本地状态
const PositionIsNumber = ref(false);
const editIsOriginal = ref(false);
const isEditMode = ref(false);

// 定义验证函数
const validateLon = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('经度不能为空'));
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('请输入数字值'));
    } else {
      if (value <= 180 && value >= -180) {
        callback(new Error('经度在 -180 和 180 之间'));
      } else {
        callback();
      }
    }
  }, 1000);
};

// 定义表单规则
const rules = {
  lonCheck: [
    { validator: validateLon, trigger: 'blur' }
  ]
};

// 计算属性 Path
const Path = computed({
  get() {
    const opt = JSON.stringify(path.value);
    return opt;
  },
  set(newValue) {
    const opt = JSON.parse(newValue);
    editElementStore.setPath(opt);
  }
});

// 方法
const savePosition = (position) => {
  path.value.splice(0, path.value.length, ...position);
  isEditMode.value = false;
};

const cancelEdit = () => {
  isEditMode.value = false;
};

const editPoint = () => {
  isEditMode.value = true;
};
</script>

<style scoped>

</style>    